<template>
  <div>
    <v-head></v-head>
    <div class="content-box sp-position">
      <div class="container"
        style="border:0">
        <el-row>
          <p class="jknr">
            监控内容：<span class="table_title">{{this.$route.params.title || this.$route.query.title}}</span>
          </p>
          <p class="jknr2">
            最后运行时间：<span class="table_title2">{{formatDate(this.$route.params.lasttime)||formatDate(this.$route.query.lasttime)}}</span>
          </p>
          <a :href="exportUrl"
            class="r exportLink"
            target="_blank"
            :style="{background:userColor || '#409EFF'}">导出</a>
        </el-row>
        <div class="tableContainer">

          <!-- 原生table改写 这个空的<el-table是为了hack加载框 -->
          <el-table v-if="loading"
            v-loading="loading"></el-table>
          <div class="detail_origin_table_box">
            <table class="detail_origin_table">
              <thead>
                <tr>
                  <th v-for="item in otherField"
                    :key="item">{{item}}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, idx) in otherTable.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                  :key="`tr_${idx}`">
                  <td v-for="field in otherField"
                    :key="`td_${field}`">
                    <template v-if="field === 'TRANSACTION_DATE'">
                      {{item[field] | filterDateTime}}
                    </template>
                    <template v-else>
                      {{item[field]}}
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- <el-table :data="otherTable.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            border
            v-loading="loading"
            style="width: 100%"
            :header-cell-style="headerStyle">
            <el-table-column v-for="item in otherField"
              :prop="item"
              :key="item"
              :label="item"
              min-width="10%">
            </el-table-column>
          </el-table> -->
          <div class="page_container">
            <el-pagination @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="otherTable.length">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import vHead from "../common/Header.vue";
import utils from '../../utils/index.js'
export default {
  components: {
    vHead
  },
  data () {
    return {
      exportUrl: "",
      currentPage: 1,
      pageSize: localStorage.getItem('dashboardnum') ? parseInt(localStorage.getItem('dashboardnum')) : 10,
      otherTable: [],
      otherField: [],
      loading: false
    };
  },
  mounted () {
    this.setHtmlFontSize();
    this.getTableDetail();
    this.getUsercolor();
    if (this.$route.params.id) {
      this.exportUrl = utils.apiUrl + '/auth/data/export?sessionId=' + localStorage.getItem('sessionId') + '&fileId=' + this.$route.params.id;
    } else if (this.$route.query.id) {
      this.exportUrl = utils.apiUrl + '/auth/data/export?sessionId=' + localStorage.getItem('sessionId') + '&fileId=' + this.$route.query.id;
    }
  },
  computed: mapState({
    msg: state => state.task.msg,
    userTable: state => state.task.userTable,
    userColor: state => state.system.userColor,
    fields (state) {
      var arr = []
      var table = state.task.userTable[0];
      for (var i in table) {
        arr.push(i);
      }
      return arr;
    }
  }),
  methods: {
    headerStyle ({ row, rowIndex, column, columnIndex }) {
      return 'width: 100px'
      // row.map((item)=>{
      //   return `width:${item.length * 8}px`
      // })
    },
    setHtmlFontSize () {
      const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
      const htmlDom = document.getElementsByTagName('html')[0];
      htmlDom.style.fontSize = htmlWidth / 7.5 + 'px';
    },
    formatDate (d) {
      if (d) {
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
          return new Date(parseInt(d)).toLocaleString({ hour12: false });
        } else if (navigator.userAgent.indexOf('Edge') > -1) {
          return new Date(parseInt(d)).toLocaleString({ hour12: false });
        } else {
          return new Date(parseInt(d)).toLocaleString('chinese', { hour12: false });
        }
      } else {
        return null;
      }
    },
    handleCurrentChange (val) {
      this.currentPage = val;
    },
    getTableDetail () {
      this.loading = true;
      if (this.$route.params.id) {
        this.$store.dispatch('getUserTable', {
          fileId: this.$route.params.id,
          sessionId: localStorage.getItem('sessionId')
        }).then(() => {
          this.loading = false;
          this.otherTable = this.userTable;
          this.otherField = this.fields;
        });
      } else if (this.$route.query.id) {
        this.$store.dispatch('getUserTable', {
          fileId: this.$route.query.id,
          sessionId: localStorage.getItem('sessionId')
        }).then(() => {
          this.loading = false;
          this.otherTable = this.userTable;
          this.otherField = this.fields;
        });
      } else {
        this.$router.push({ path: '/user' });
      }
    },
    getUsercolor () {
      this.$store.dispatch('getUserColor', {
        sessionId: localStorage.getItem('sessionId')
      })
    },
  },
  filters: {
    filterDateTime (value) {
      return value.substring(0, value.length - 2)
    }
  },
  deactivated () {
    this.$destroy()
  }
};
</script>


<style scoped>
.box_container {
  float: left;
  height: 230px;
  background-color: #fff;
  border: 1px solid #e6eaef;
  border-top: 4px solid #d6d6d6;
  border-radius: 4px;
  margin: 20px 0 0 20px;
}
.box_title {
  font-size: 12px;
  padding: 10px 0 10px 10px;
}
.sp-position {
  left: 0;
  top: 87px;
}
.table_container {
  height: 164px;
}
.el-table .cell,
.el-table th div,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
  padding-left: 0px;
}
.more {
  line-height: 36px;
  color: #606266;
  font-size: 12px;
}
.tableContainer {
  width: 90%;
  margin: 30px auto 20px auto;
}
.jknr {
  float: left;
  font-size: 14px;
  margin: 10px 0 0 68px;
  font-weight: bold;
}
.jknr2 {
  float: left;
  font-size: 14px;
  margin: 10px 0 0 42%;
  font-weight: bold;
}
.table_title {
  margin: 0;
}
.table_title2 {
  margin-top: 2px;
}
.exportLink {
  display: inline-block;
  margin-right: 66px;
}
@media only screen and (max-width: 750px) {
  .sp-position {
    left: 0;
    top: 2.64rem;
  }
  .jknr2 {
    float: none;
    font-size: 14px;
    margin: 0 0 0 0.3rem;
    font-weight: normal;
  }
  .jknr {
    float: none;
    margin: 0 0 0.1rem 0.3rem;
    font-size: 14px;
    font-weight: normal;
  }
  .exportLink {
    margin: -0.34rem 0.2rem 0 0;
  }
}

.detail_origin_table_box {
  width: 100%;
  overflow-x: auto;
}
.detail_origin_table {
  min-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-right: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
}
.detail_origin_table th {
  color: #909399;
}
.detail_origin_table th,
.detail_origin_table td {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 23px;
  border-left: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  white-space: nowrap;
  text-align: left;
}
.detail_origin_table td {
  color: #606266;
  transition: background-color 0.25s ease;
}
.detail_origin_table tr:hover td {
  background: #f5f7fa;
}
</style>
